<!-- 配置-定义 -->
<template>
    <div class="container-app">
        <div class="bg-white area" id="asset_list" :class="IOSfull ? 'IOSfull' : ''">
            <div :class="rotate ? 'TableY' : $q.fullscreen.isActive ? 'Nrotate' : 'Nrotate2'">
                <div class="row head">
                    <q-separator vertical size="3px" class="leftLine bg-primary" />
                    <span class="q-ml-md name" :class="headShow ? 'text-primary' : 'text-black-3'"
                        @click="headClick">当前信息</span>
                    <q-separator vertical size="2px" class="q-ml-md" style="height:20px;margin-top:15px;" />
                    <span class="q-ml-md name" :class="headShow ? 'text-black-3' : 'text-primary'"
                        @click="headClick2">历史信息</span>
                    <q-space />
                    <q-icon name="mdi-filter-minus-outline" size="18px"
                        style="color:#BEBEBE;margin-top:13px;margin-right:5px;" :color="colorShow ? 'primary' : ''" />
                    <div class="q-mr-xs cursor-pointer add" style="color:#333333;" @click="searchShowClick">筛选</div>
                    <q-btn flat round dense :icon="$q.fullscreen.isActive ? 'fullscreen_exit' : 'fullscreen'"
                        @click="toggleFullscreen(1)" />
                </div>
                <div v-if="headShow">
                    <Table :columns="columns" ref="child" />
                </div>
                <div v-else>
                    <ReadTable :columns="columns2" ref="child" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { defineComponent } from 'vue'
import Table from './table'
import ReadTable from './readTable'
import { mapGetters } from 'vuex';
import wetherScroll from 'src/components/mixins/wetherScroll.js'

export default defineComponent({
    mixins: [wetherScroll],
    name: 'informMangement',
    components: {
        Table,
        ReadTable
    },
    computed: {
        ...mapGetters(['themeColor', 'device']),
    },
    data() {
        return {
            columns: [
                { name: 'idNum', required: true, label: 'ID', align: 'center', field: 'idNum', isSort: true },
                { name: 'title', required: true, label: '消息类型', align: 'center', field: 'title' },
                { name: 'content', align: 'center', label: '消息内容', field: 'content' },
                { name: 'create_time', align: 'center', label: '消息产生时间', field: 'create_time', isSort: true },
                { name: 'cz', align: 'center', label: '操作', field: 'cz' },
            ],
            columns2: [
                { name: 'idNum', required: true, label: 'ID', align: 'center', field: 'idNum', isSort: true },
                { name: 'title', required: true, label: '消息类型', align: 'center', field: 'title' },
                { name: 'content', align: 'center', label: '消息内容', field: 'content' },
                { name: 'create_time', align: 'center', label: '消息产生时间', field: 'create_time', isSort: true },
                { name: 'readed_time', align: 'center', label: '消息读取时间', field: 'readed_time', isSort: true },
            ],
            colorShow: false,
            rotate: false,
            IOSfull: false,
            headShow: 1,
        }
    },
    watch: {
        '$q.fullscreen.isActive'(val) {
            this.$route.path == '/msg' && this.device == 'mobile' ? this.rotate = val : this.rotate = false;
            if (this.rotate) {
                this.wetherScroll();
            } else {
                this.removeWetherScroll();
            }
        },
        $route(val) {
            if (val && val.path == '/msg') {
                this.headShow = 1
            }
        },
    },
    mounted() {
    },
    methods: {
        searchShowClick() {
            this.colorShow = !this.colorShow;
            this.$refs.child.searchShowClick();
        },
        headClick() {
            this.headShow = 1
        },
        headClick2() {
            this.headShow = 0
        },
        /**
         * 全屏
         */
        toggleFullscreen(val) {
            if (val == 1) {
                this.rotate = false
            }
            this.$nextTick(_ => {
                let dom = document.getElementById('asset_list')
                let nav = window.navigator
                let ua = nav.userAgent

                if (/iPhone|iPod|iPad/.test(ua)) {
                    this.IOSfull = !this.IOSfull
                    let con = document.getElementsByClassName('container-app')
                    if (this.IOSfull) {
                        dom.style.width = window.innerHeight + 'px'
                        con[0].style.padding = '0px'
                    } else {
                        dom.style.width = ''
                        con[0].style.padding = '30px'
                    }
                } else {
                    this.$q.fullscreen.toggle(dom).then(_ => {
                    }).catch(error => {
                        console.log(error)
                    })
                }
            })
        }
    }

})
</script>

<style lang="scss" scoped>
</style>

